<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vs-tree2.0_基础示例</title>
  <link rel="stylesheet" href="../dist/vs-tree.css">
  <link rel="stylesheet" href="./static/css/index.css">
</head>

<body>
  <p>配置项优先级，全局 < props < options </p>
  <div id="root">
    <vs-tree 
      ref="vsTree" 
      :data="list"
      :max="2"
      :load="loadNode"
      :options="options" 
      :format="format" 
      lazy
      show-line
      show-icon
      only-show-leaf-icon
      show-checkbox
      :checked-keys="checkedKeys"
      @click="onClick" 
      @change="onChange">
      <!-- <span tree-slot="name" tree-slot-scope="node">#[[node.data.name + 1]]-自定义</span> -->
      <span tree-slot="append" tree-slot-scope="node">
        <a>#[[ node.data.id]]-#[[1+1]]</a>
      </span>
    </vs-tree>
  </div>
  <script type="module">
    console.time('create:data')
    var id = 1000
    function add(parentId, name) {
      const list = []
      for (var i = 0; i < 10; i++) {
        list.push({ id: '100' + id++, name: name + i, parentId: parentId })
      }
      return list
    }
    const data = {
      id: '1', name: 'zhangsan', parentId: '-1', children: [
        { id: '100', name: 'wangwu', parentId: '1', children: add('100', 'wangwu') },
        { id: '101', name: 'zhaoliu', parentId: '1', children: add('101', 'zhaoliu') },
        { id: '102', name: 'huahua', parentId: '1' },
        { id: '103', name: 'oo-1', parentId: '1' },
        { id: '104', name: 'oo-2', parentId: '1' },
        { id: '105', name: 'oo-3', parentId: '1' },
        { id: '106', name: 'oo-4', parentId: '1' },
        { id: '107', name: 'oo-5', parentId: '1' },
        { id: '108', name: 'oo-6', parentId: '1' },
        { id: '109', name: 'oo-7', parentId: '1' },
        { id: '110', name: 'oo-8', parentId: '1' },
        { id: '111', name: 'oo-9', parentId: '1' },
      ]
    }
    console.timeEnd('create:data')
    import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
    import vsTree, { install } from '../dist/vs-tree.esm.browser.js'
    Vue.use(install, {
      max: 1
    })

    var vm = new Vue({
      el: '#root',
      data() {
        return {
          list: data,
          options: {
            max: 3,
            disabledKeys: ["104", "105"],
            expandKeys: ["101"],
            methods: {
              treeClick () {
                console.log('-------')
              }
            }
            // maxHeight: '200px'
          },
          checkedKeys: ["100", "102", "104"]
        }
      },
      mounted() {
        console.log(this.$refs.vsTree);
      },
      methods: {
        onClick (e, node) {
          console.log(node, 'click');
        },
        onChange (node) {
          console.log(node, 'change');
        },
        format (data) {
          return {}
        },
        loadNode (node, resolve) {
          setTimeout(() => {
            resolve([{
              id: id++,
              name: '新叶子节点' + id,
              isLeaf: true
            }])
          }, 1000)
        }
      }
    })
  </script>
</body>

</html>